<template>
    <transition name="slider">
        <div class="mine-config">
            <m-header :canreturn=true :titleText="titleText"></m-header>
            <div class="config-box">
                <div class="config-item" @click="personInfo">
                    <span class="icon person"></span>
                    <p>个人资料</p>
                    <span class="right arrow"></span>
                </div>
                <div class="config-item">
                    <span class="icon autodown"></span>
                    <p>下载后自动安装</p>
                    <span class="right">
                        <radio-box :selected="autoInstall" @radioselect="setAutoInstall"></radio-box>
                    </span>
                </div>
                <div class="config-item">
                    <span class="icon autodelete"></span>
                    <p>安装后自动删除安装包</p>
                    <span class="right">
                        <radio-box :selected="autoDelete" @radioselect="setAutoDelete"></radio-box>
                    </span>
                </div>
                <div class="config-item">
                    <span class="icon updata"></span>
                    <p>检查更新</p>
                </div>
            </div>
            <div class="logout" ref="logout" @click="logout" v-show="getLoginState === true">
                退出登录
            </div>
            <mask-common :showMask="showMask" :maskInfo="maskInfo" @mask="hideMask"></mask-common>

            <transition name="slider">
                <router-view></router-view>
            </transition>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
import MHeader from '@/components/m-header/m-header';
import MaskCommon from '@/base/maskcommon/maskcommon';
import RadioBox from '@/base/radiobox/radiobox';
import { getLocalStorage, setLocalStorage } from '@/common/js/storage';
import { mapGetters, mapMutations } from 'vuex';
import { getCommonInfoHasData } from '@/base/api/indexpage/getindexinfo';

export default {
    data() {
        return {
            titleText: '设置',
            showMask: false,
            maskInfo: {
                content: '',
                btn: [],
            },
            autoInstall: false,
            autoDelete: false,
        };
    },
    mounted() {
        let val1 = getLocalStorage('autoInstall') ? getLocalStorage('autoInstall') : this.autoInstall;
        let val2 = getLocalStorage('autoDelete') ? getLocalStorage('autoDelete') : this.autoDelete;
        this.autoInstall = val1 === 'false' ? false : true;
        this.autoDelete = val2 === 'false' ? false : true;
    },
    methods: {
        personInfo() {
            if (this.getLoginState) {
                this.$router.push('/mine/config/person');
            } else {
                this.$router.push('/login');
            }
        },
        logout() {
            const add = '/user/logout';
            getCommonInfoHasData(add, {
                token: this.getToken,
            }).then(() => {
                this.showMask = true;
                this.maskInfo.content = '退出后将无法收到新消息提醒，确定退出吗？';
                this.maskInfo.btn[0] = {
                    btnTitle: '取消',
                    type: 'hide',
                };
                this.maskInfo.btn[1] = {
                    btnTitle: '确定',
                    type: 'logout',
                };
                this.userLogout();
                this.settoken('');
                setLocalStorage('token', '');
            });
        },
        hideMask() {
            this.showMask = false;
        },
        //  储存是否自动安装配置
        setAutoInstall(val) {
            setLocalStorage('autoInstall', val);
        },
        //  储存是否自动删除安装包
        setAutoDelete(val) {
            setLocalStorage('autoDelete', val);
        },
        ...mapMutations([
            'userLogout',
            'settoken',
        ]),
    },
    computed: {
        ...mapGetters(['getLoginState', 'getToken']),
    },
    components: {
        MHeader,
        MaskCommon,
        RadioBox,
    },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

slider();

.mine-config {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background: #ffffff;

    .config-box {
        .config-item {
            height: 60px;
            border-bottom: 1px solid #eeeeee;
            display: flex;
            align-items: center;
            padding: 0 15px;
            position: relative;

            .icon {
                display: block;
                width: 18px;
                height: 18px;
                background-size: 18px 18px;
                margin-right: 10px;

                &.person {
                    width: 18px;
                    height: 19px;
                    background-size: 18px 19px;
                    bg-image('person');
                }

                &.autodown {
                    bg-image('autodown');
                }

                &.autodelete {
                    bg-image('autodelete');
                }

                &.updata {
                    bg-image('updata');
                }
            }

            .right {
                position: absolute;
                right: 15px;

                &.arrow {
                    top: 50%;
                    transform: translate3d(0, -50%, 0);
                    width: 9px;
                    height: 16px;
                    bg-image('rightArrow');
                    background-size: 9px 16px;
                }
            }
        }
    }

    .logout {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 44px;
        background: #ffc400;
        line-height: 44px;
        text-align: center;
        color: #ffffff;
        font-size: $font-size-large;
    }
}
</style>
